<template>
  <div>
    <div><h1>订单列表</h1></div>
    <div>
      <el-button type="primary" @click="HandleAddOrder"> 添加订单 </el-button>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="orderId" label="ID" />
        <el-table-column prop="username" label="客户名称" />
        <el-table-column prop="userPhone" label="客户电话" />
        <el-table-column prop="psLic" label="配送公里" />
        <el-table-column prop="psMoney" label="配送费" />
        <el-table-column prop="createTime" label="下单时间" />
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.orderStatus == 0"
              >未接单</el-tag
            >
            <el-tag type="primary" v-if="scope.row.orderStatus == 1"
              >正在派送</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="downTime" label="预计送达时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.orderStatus == 0"
              @click="getUpdataOrder(scope.row)"
              type="primary"
              >接单</el-button
            >
            <el-button
              v-if="scope.row.orderStatus == 1"
              @click="getdownOrder(scope.row)"
              type="primary"
              >送达</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisible" title="接单" width="500">
        <el-form :model="form">
          <el-form-item label="订单编号" :label-width="formLabelWidth">
            <el-input v-model="form.orderId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="送达时间" :label-width="formLabelWidth">
            <el-input v-model="form.downTime" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="UpDataOrder"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisible1" title="添加订单" width="500">
        <el-form :model="form">
          <el-form-item label="用户姓名" :label-width="formLabelWidth1">
            <el-input v-model="addform.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth1">
            <el-input v-model="addform.mobile" autocomplete="off" />
          </el-form-item>
          <el-form-item label="配送里" :label-width="formLabelWidth1">
            <el-input v-model="addform.psLic" autocomplete="off" />
          </el-form-item>
          <el-form-item label="配送费" :label-width="formLabelWidth1">
            <el-input v-model="addform.psMoney" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="AddDataOrder"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  Login,
  OrderList,
  DeleteOrder,
  upDataOrder,
  AddOrder,
} from "../api/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const formLabelWidth = "140px";
const formLabelWidth1 = "140px";
const tableData = ref([]);
const total = ref(0);
const pageSearch = ref({
  pageNum: 1,
  pageSize: 5,
});

const form = ref({
  orderId: null,
  downTime: null,
});
const addform = ref({
  createTime: "",
  downTime: "",
  orderId: null,
  orderStatus: null,
  psLic: null,
  psMoney: null,
  userPhone: "",
  username: "",
});
//添加订单
const HandleAddOrder = () => {
  dialogFormVisible1.value = true;
};
const AddDataOrder = () => {
  AddOrder(addform.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
      dialogFormVisible1.value = false;
      loadOrderList();
    }
  });
};
//接单
const getUpdataOrder = (row: any) => {
  form.value.orderId = row.orderId;
  form.value.downTime = new Date();
  dialogFormVisible.value = true;
};

const UpDataOrder = () => {
  upDataOrder(form.value).then((res) => {
    if (res.data.cdoe == 200) {
      ElMessage.success("接单完成");
      dialogFormVisible.value = false;
      loadOrderList();
    }
  });
};

const getdownOrder = (row: any) => {
  DeleteOrder(row).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("订单送达");
      loadOrderList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const loadOrderList = () => {
  OrderList(pageSearch.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};

onMounted(() => {
  loadOrderList();
});
</script>

<style scoped></style>
